Web Development Error Handling এবং Validation Messages প্রদর্শন গাইড ও নোট

Riot.js-এ Error Handling এবং Validation Messages প্রদর্শন করার জন্য সাধারণভাবে state management এবং conditional rendering ব্যবহার করা হয়। যখন ব্যবহারকারী কোনও ফর্ম পূর্ণ করেন বা কোনো ইনপুট প্রদান করেন, তখন আপনি যাচাই করতে পারেন এবং এর ফলস্বরূপ error messages বা validation messages প্রদর্শন করতে পারেন।

১. Error Handling এবং Validation Messages প্রদর্শন করা

ধরা যাক, আপনি একটি ফর্ম তৈরি করছেন যেখানে ব্যবহারকারী নাম এবং ইমেল ইনপুট দিবেন, এবং আপনি চাইছেন যে যদি কোনও ইনপুট ভুল হয়, তাহলে একটি ভ্যালিডেশন মেসেজ দেখানো হবে। এই কাজটি আমরা Riot.js-এ নিম্নলিখিতভাবে করতে পারি।

উদাহরণ: ফর্ম ভ্যালিডেশন এবং এরর মেসেজ প্রদর্শন

Form Component (Form.riot)

<!-- src/components/Form.riot -->
<form onsubmit={handleSubmit}>
  <h2>Contact Us</h2>

  <!-- Name Field -->
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" value={name} onchange={e => name = e.target.value} />
    <p if={nameError} class="error">{nameError}</p>
  </div>

  <!-- Email Field -->
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" value={email} onchange={e => email = e.target.value} />
    <p if={emailError} class="error">{emailError}</p>
  </div>

  <!-- Submit Button -->
  <div>
    <button type="submit">Submit</button>
  </div>

  <script>
    export default {
      onMounted() {
        this.name = '';
        this.email = '';
        this.nameError = '';
        this.emailError = '';
      },

      handleSubmit(event) {
        // Prevent form submission
        event.preventDefault();

        // Reset previous error messages
        this.nameError = '';
        this.emailError = '';

        // Validate inputs
        let valid = true;

        if (this.name.trim() === '') {
          this.nameError = 'Name is required.';
          valid = false;
        }

        if (this.email.trim() === '') {
          this.emailError = 'Email is required.';
          valid = false;
        } else if (!this.isValidEmail(this.email)) {
          this.emailError = 'Please enter a valid email address.';
          valid = false;
        }

        // If valid, submit form (here we just log the data)
        if (valid) {
          console.log('Form Submitted!', {
            name: this.name,
            email: this.email
          });
        }
      },

      isValidEmail(email) {
        // Simple email validation regex
        const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return regex.test(email);
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 12px;
    }
  </style>
</form>

ব্যাখ্যা:

1. স্টেট তৈরি করা:
   • name, email নামক ভেরিয়েবলগুলি ব্যবহারকারীর ইনপুট ধারণ করতে ব্যবহৃত হচ্ছে।
   • nameError, emailError নামক ভেরিয়েবলগুলি ইনপুট ফিল্ডের ভুল ভ্যালিডেশন বার্তা ধারণ করবে।
2. handleSubmit ফাংশন:
   • Form Submit হ্যান্ডল করা হয়। এখানে ইনপুটগুলোর ভ্যালিডেশন করা হচ্ছে, এবং যদি কোনো ইনপুট ভুল থাকে তবে তাতে সংশ্লিষ্ট error message প্রদর্শন করা হয়।
3. isValidEmail ফাংশন:
   • এটি একটি ইমেল ভ্যালিডেশন ফাংশন যা ইমেলের সঠিকতা যাচাই করার জন্য একটি সাধারণ রেগুলার এক্সপ্রেশন (regex) ব্যবহার করে।
4. Conditional Rendering:
   • if={nameError} এবং if={emailError} ব্যবহার করে conditional rendering করা হয়েছে, যেখানে error messages শুধুমাত্র তখনই দেখানো হবে যখন সংশ্লিষ্ট ইনপুটে কোন ভুল থাকবে।
5. CSS:
   • .error ক্লাসের মাধ্যমে error messages এর রঙ এবং ফন্ট সাইজ সেট করা হয়েছে।

২. Error Handling in API Calls

এছাড়াও আপনি API call করার সময়ও Error Handling করতে পারেন। যদি API থেকে কোনো ত্রুটি ঘটে, তখন আপনি একটি ত্রুটি বার্তা প্রদর্শন করতে পারেন।

উদাহরণ: API Call Error Handling

<!-- src/components/ApiForm.riot -->
<api-form>
  <h2>Submit Your Info</h2>

  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" value={name} onchange={e => name = e.target.value} />
    </div>
    
    <button type="submit">Submit</button>

    <p if={errorMessage} class="error">{errorMessage}</p>
  </form>

  <script>
    export default {
      onMounted() {
        this.name = '';
        this.errorMessage = '';
      },

      async handleSubmit(event) {
        event.preventDefault();
        
        try {
          // Simulating an API call with a promise
          const response = await this.fakeApiCall(this.name);
          
          if (response.success) {
            console.log('Form submitted successfully');
          } else {
            throw new Error('Submission failed');
          }
        } catch (error) {
          this.errorMessage = error.message;
        }
      },

      fakeApiCall(name) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (name === '') {
              reject(new Error('Name is required'));
            } else {
              resolve({ success: true });
            }
          }, 1000);
        });
      }
    }
  </script>

  <style>
    .error {
      color: red;
      font-size: 12px;
    }
  </style>
</api-form>

এখানে:

• fakeApiCall একটি সিমুলেটেড API কল, যেখানে যদি নাম খালি থাকে তবে এটি ত্রুটি (error) সৃষ্টি করবে।
• errorMessage ভ্যারিয়েবলটি ত্রুটি বার্তা ধারণ করে এবং এটি conditional rendering এর মাধ্যমে UI-তে প্রদর্শন করা হয়।

সারাংশ:

1. Form Validation: ব্যবহারকারী ইনপুট যাচাই করার জন্য if শর্ত এবং error message প্রদর্শন করতে conditional rendering ব্যবহার করা হয়।
2. Error Handling: API কল বা অন্য কোনও প্রক্রিয়ায় ত্রুটি ঘটলে তা try-catch ব্লক ব্যবহার করে হ্যান্ডেল করা হয় এবং ত্রুটি বার্তা UI-তে প্রদর্শিত হয়।

এই পদ্ধতি ব্যবহার করে আপনি Riot.js-এ ইনপুট ভ্যালিডেশন এবং ত্রুটি হ্যান্ডলিং খুব সহজে করতে পারেন।